<template>
  <v-dialog v-model="dialog" :overlay="false" scrollable persistent max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
    <v-btn dark color="primary" slot="activator" small><v-icon dark>add</v-icon></v-btn>
    <v-card>
      <v-card-title>
        <span class="headline">{{name}}</span>
      </v-card-title>
      <v-divider ></v-divider>
      <v-card-text>
        <v-container grid-list-md>
          <v-form v-model="valid"  ref="newserviceform">
          <v-layout wrap>
            <v-flex xs12 sm6 md3>
              <v-text-field label="服务名称" v-model="fields.name" :rules="nameRules"  required></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-text-field label="服务英文名" v-model="fields.name_en"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-text-field label="外部域名" v-model="fields.url"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-autocomplete :items="OutterIpSource.items" v-model="fields.OutterIpSource" item-text="text" item-value="value" :clearable="true" autocomplete label="外网IP" ></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-text-field label="内部域名" v-model="fields.innerUrl"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-text-field label="内网IP" v-model="fields.innerIp" :rules="innerIpRules" :error-messages="msg.innerIp" required></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-autocomplete :items="type.items" v-model="fields.serviceType" item-text="text" :rules="typeRules" required item-value="value" label="服务类型" autocomplete ></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-autocomplete :items="status.items" v-model="fields.status" item-text="text" :rules="statusRules" required item-value="value" label="状态"></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm6 md3>
              <v-autocomplete :items="env.items" v-model="fields.env" item-text="text" :rules="envRules" item-value="value" required label="环境" ></v-autocomplete>
            </v-flex>
            <v-flex xs12 sm12 md12>
              <v-autocomplete :items="host.items" v-model="fields.host" :clearable="true"
                        multiple chips item-text="text" item-value="value" label="主机" autocomplete></v-autocomplete>
            </v-flex>
          </v-layout>
          </v-form>
        </v-container>
        <small>*必填</small>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" @click.native="closeNewService($refs.newserviceform)" small><h4>关闭</h4></v-btn>
        <v-btn color="warning" @click.native="saveService($refs.newserviceform)" small><h4>保存</h4></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('newservice')

export default {
  name: 'newservice',
  data: function () {
    return this.$store.state.newservice
  },
  methods: {
    ...mapActions({
      closeNewService: 'closeNewService',
      saveService: 'saveService',
      newServiceDialog: 'newServiceDialog',
      loadServiceSelect: 'loadServiceSelect',
      serviceEnv: 'serviceEnv'
    })
  },
  watch: {
    dialog () {
      this.newServiceDialog(this.$refs.newserviceform)
    },
    'fields.env': {
      handler: function () {
        this.serviceEnv()
      }
    }
  },
  mounted () {
    this.loadServiceSelect()
  }
}

</script>
